<template>
	<div class="personalUnbound-wrap">
      <div class="personalUnbound-flex">
        <span class="span1">真实姓名</span>
        <input placeholder="请输入姓名" v-model="name"></input>
      </div>
      <div class="personalUnbound-flex">
        <span class="span1">身份证号</span>
        <input placeholder="请输入证件号" v-model="idcard"></input>
      </div>
      <div class="personalUnbound-tip">
        *以上信息一经填写,无法自行修改,请填写真实有效信息
        <span class="submit" @click="submit">保存修改</span>
      </div>
      <div class="personalUnbound-flex" style="margin-top: 22px">
        <span class="span1">手机号码</span>
        <span class="span2">{{ this.phone }}</span>
        <span class="more"></span>
      </div>
      <div class="personalUnbound-flex" style="margin-top: 11px">
        <span class="span1">修改密码</span>
        <span class="more" @click="changepasswd"></span>
      </div>
      <div class="logout" @click="logout">退出登录</div>
	</div>
</template>
<script type="text/ecmascript-6">
  export default {
    props: {
    },
    data() {
      return {
        name: '',
        idcard: '',
        phone: window.localStorage.cphone
      };
    },
    methods: {
      logout() {
        window.localStorage.removeItem('cphone');
        this.$router.push({path: '/login/?redireat_url=' + '/'});
      },
      changepasswd() {
        this.$router.push({path: '/changepasswd/'});
      },
      submit() {
        this.$http.post('api/login/updateuserinfo/', {mobile: this.phone, real_name: this.name, idcard_num: this.idcard}).then(response => {
          window.alert('修改成功');
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/car.styl"
  /* 主要文字 黑 $main-fn
     次要文字 灰 $se-fn
     预填文字 灰 $pre-fn
     描边 灰 $border 
     背景 灰白 $bg 
     主题 红 $theme
     辅助 蓝 $assist */
  .personalUnbound-wrap
    margin-top 45px
    .personalUnbound-flex
      height 40px
      width 100%
      background-color rgb(255,255,255)
      padding-left: 33px
      line-height 40px
      font-size 16px
      border-1px($border)
      .span1
        text-align right
        display inline-block
        max-width 80px
      input
        line-height 41px
        position absolute
        margin-left 25px
        color $se-fn
        font-size 16px
        -webkit-tap-highlight-color rgba(0,0,0,0)
      .span2
        display inline-block
        margin-left 20px
      .more
        display inline-block
        float right
        margin-right 45px
        margin-top 13px
        rectangle-icon(rgb(255,255,255),7px,15px)
        icon-image('right_arrow')
    .personalUnbound-tip
      height 70px
      width 100%
      background-color rgb(255,255,255)
      border-1px($border)
      padding-top 6px 
      text-align center
      font-size 10px
      color rgb(178,178,178)
      .submit 
        display inline-block
        width 165px
        height 32px
        margin-top 9px
        border-radius 5px
        background-color $theme
        color rgb(255,255,255)
        font-size 16px
        line-height 32px
        text-align center
    .logout
      position fixed
      bottom 32px
      left 0px
      right 0px
      color rgb(87,107,149)
      text-align center
      font-size 13px
</style>